import QtQuick
import QtQuick.Controls
import Qt.labs.qmlmodels
 import QtQuick.Layouts
Rectangle {
    width: 400
    height: 300
    color: "#f0f0f0"

    TableModel {
        id: tableModel
        TableModelColumn { display: "name" }
        TableModelColumn { display: "age" }
        TableModelColumn { display: "occupation" }

        rows: [
            {
                name: "张三",
                age: "25",
                occupation: "工程师"
            },
            {
                name: "李四",
                age: "30",
                occupation: "设计师"
            },
            {
                name: "王五",
                age: "28",
                occupation: "产品经理"
            },
            {
                name: "赵六",
                age: "35",
                occupation: "销售经理"
            }
        ]
    }

    property int selectedRow: -1
    property int hoveredRow: -1
    readonly property color selectedColor: "#bbdefb"
    readonly property color hoverColor: "#e3f2fd"

    Row{
        anchors.fill:parent// ✅ 使用 Row，但不要 anchors.fill
        spacing:20
        Item{
            id:leftItem
            width:parent.width/2
            height:parent.height
            Rectangle{
                anchors.fill:parent
                color:"yellow"
            }
            Item {
                id: toplabel
                anchors.top:parent.top
                width:leftItem.width
                height:30
                Label{
                    id:label
                    anchors.centerIn: parent
                    text:"基础TableView"
                }
            }

            TableView{
                //anchors.centerIn: leftItem
                anchors.top:toplabel.bottom
                anchors.left:parent.left
                anchors.right:parent.right
                anchors.bottom:parent.bottom
                anchors.verticalCenter: parent.verticalCenter

                model: tableModel
                delegate:Rectangle{
                    implicitWidth: 40
                    implicitHeight: 30
                    Text{
                        anchors.centerIn: parent
                        text:display
                    }
                }
                // columnWidthProvider: (column) => 80
                // rowHeightProvider: (row) => 30
            }
        }
        Item{
             id:rightItem
             // anchors.left:leftItem.right
             // anchors.right:parent.right
             width:(parent.width/2)
             height:parent.height
             Rectangle{
                 anchors.fill:parent
                 color:"red"
             }
             Item {
                 id: toplabel1
                 anchors.top:parent.top
                 width:leftItem.width
                 height:30
                 Label{
                     anchors.centerIn: parent
                     text:"自定义TableView"
                 }
            }

           TableView{
               anchors.top:toplabel1.bottom
               anchors.left:parent.left
               anchors.right:parent.right
               anchors.bottom:parent.bottom
               model: tableModel
               delegate:Rectangle{
                   color: row === selectedRow ? selectedColor :
                          row === hoveredRow ? hoverColor :
                          row % 2 ? "#f5f5f5" : "white"
                   implicitWidth: 60
                   implicitHeight: 30
                   Text{
                       anchors.centerIn: parent
                       text:display
                   }
                   MouseArea{
                       anchors.fill: parent
                       hoverEnabled: true
                       onEntered: {
                           selectedRow = row
                       }
                       onExited:{
                           hoveredRow = -1
                       }
                       onClicked: {
                           selectedRow = row
                       }
                   }
               }
           }
        }
    }
}

